<template>
    <div>
        <el-row type="flex" justify="space-between">
            <el-col>
                <el-button type="primary" @click="addNewCourse">新增课程</el-button>
            </el-col>
            <el-col>
                <el-input class="clues-manage-search-input" @keyup.enter.native="quickQuery"
                          style="width: 300px;float: right;" placeholder="请输入课程名称" v-model="searchValue"
                          size="small">
                    <el-button  slot="append" icon=""
                                @click.native.prevent="quickQuery">搜索</el-button>
                </el-input>
            </el-col>
        </el-row>
        <div style="margin-top: 30px;">
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="公开课名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="直播时间"
                        width="180">
                    <template scope="scope">
                        {{scope.row.start_time*1000 | dateformat('YYYY-MM-DD HH:mm:ss')}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="teacher_name"
                        label="主讲老师">
                </el-table-column>
                <el-table-column
                        prop="real_number"
                        label="报名人数">
                </el-table-column>
                <el-table-column
                        label="状态">
                    <template scope="scope">
                        {{getValOrKey(scope.row.status)}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="controller"
                        label="控制台">
                </el-table-column>
                <el-table-column label="操作" width="230">
                    <template scope="scope">
                        <el-button type="text" size="small">{{scope.row.status===4?'重新发布':'隐藏'}}</el-button>
                        <el-button type="text" size="small" @click="courseEdit(scope.row.id)">编辑</el-button>
                        <el-button type="text" size="small" @click="courseDel(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15, 30, 50]" :page-size="number" :current-page="page" layout="total, sizes, prev, pager, next, jumper" :total="courseListCount" :page-count="10/number">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { ApigetCourseList, ApiDelCourseList } from '../../common/js/api'
    import { CourseStatus } from '../../common/js/util'

    export default {
        data() {
            return {
                courseListCount:0, // 列表总数
                number: 10,
                page: 1,
                searchValue: '', // 查询value
                tableData: [],
            };
        },
        methods: {
            // 查询课程列表
            getCourseList: function() {
                ApigetCourseList({
                    keyword: this.searchValue,
                    page: this.page,
                    number: this.number
                }).then(res => {
                    if(res.data.code === 0){
                        this.tableData = res.data.data.Body;
                        this.courseListCount = res.data.data.totalCount
                    }
                })
            },
            // 编辑课程
            courseEdit: function (id) {
                this.$router.push({ path: '/courseedit?id=' + id });
            },
            // 新增课程
            addNewCourse: function(){
                this.$router.push({ path: '/courseadd' });
            },
            // 删除课程
            courseDel: function (id) {
                this.$confirm('此操作将删除该课程, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    ApiDelCourseList({id: id}).then(res => {
                        if(res.data.code === 0){
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            this.getCourseList();
                        }else {
                            this.$message({
                                type: 'info',
                                message: res.data.msg
                            });
                        }
                    }).catch(() => {

                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },
            handleCurrentChange(val) {
                this.page = val;
                this.getCourseList();
            },
            handleSizeChange(val) {
                this.number = val;
                this.getCourseList()

            },
            // 绑定状态对应值
            getValOrKey(key) {
                let current = CourseStatus.find(el=>{
                    return el.name == key || el.key == key
                })
                if(!current) return null;
                return current.key == key?current.name:current.key
            },
            quickQuery() { // 搜索查询
                this.page = 1;
                this.getCourseList()
            },

        },
        created(){
            this.getCourseList()
        }
    }

</script>

<style lang="scss" scoped>

</style>
